<template>
  <div class="subpage">
    <my-head title="注册">
      <van-icon name="revoke" class="hicon" @click="gotoback" />
    </my-head>
    <van-form @submit="onSubmit" ref="form" @failed="onFailed">
      <van-field
        v-model="form.username"
        name="username"
        label="用户名称"
        placeholder="请输入用户名称"
        clearable
        :rules="[{ required: true, message: '请填写用户名' }]"
      />
      <van-field
        v-model="form.phone"
        name="phone"
        label="手机号码"
        placeholder="请输入手机号码"
        clearable
        :rules="[
          { required: true, message: '请填写手机号' },
          {
            pattern: reg.phone,
            message: '请输入正确的手机号',
          },
        ]"
      />
      <van-field
        v-model="form.email"
        name="email"
        label="邮箱"
        placeholder="请输入邮箱"
        clearable
        :rules="[
          { required: true, message: '请填写邮箱' },
          {
            validator: checkEmail,
            message: '请输入正确的邮箱',
          },
        ]"
      />
      <van-field
        v-model="form.password"
        name="password"
        label="登录密码"
        placeholder="请输入登录密码"
        :type="type"
        @blur="checkDbPassword"
        :right-icon="type == 'password' ? 'closed-eye' : 'eye-o'"
        @click-right-icon="changeType"
        clearable
        :rules="[
          { required: true, message: '请填写密码' },
          {
            pattern: reg.pwd,
            message: '请输入6-16的数字字母组合',
          },
        ]"
      />
      <van-field
        v-model="form.dbpassword"
        name="dbpassword"
        label="确认密码"
        placeholder="请输入确认密码"
        :type="type1"
        :right-icon="type1 == 'password' ? 'closed-eye' : 'eye-o'"
        @click-right-icon="changeType1"
        clearable
        :rules="[
          { required: true, message: '请填写密码' },
          {
            pattern: reg.pwd,
            message: '请输入6-16的数字字母组合',
          },
          {
            validator: checkPass,
            message: '两次密码不一致',
          },
        ]"
      />
      <div class="links">
        <p class="left">
          <router-link to="/login">有账号,去登录?</router-link>
        </p>
        <p class="right">
          <router-link to="/forgetpass">找回密码?</router-link>
        </p>
      </div>
      <div style="margin: 16px">
        <van-button block type="primary" native-type="submit">提交</van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {},
      type: "password",
      type1: "password",
    };
  },
  methods: {
    checkDbPassword() {
      console.log(this.$refs.form);
      if (this.reg.pwd.test(this.form.password)) {
        console.log(this.$refs.form)
        // this.$refs.form.validateField("dbpassword");
      }
    },
    changeType() {
      this.type = this.type == "password" ? "text" : "password";
    },
    changeType1() {
      this.type1 = this.type1 == "password" ? "text" : "password";
    },
    checkEmail(val) {
      return this.reg.email.test(val);
    },
    checkPass(val) {
      if (this.reg.pwd.test(this.form.password)) {
        return val == this.form.password;
      }
    },
    onSubmit(value) {
      this.$ajax
        .findUser({
          username: value.username,
          phone: value.phone,
        })
        .then((res) => {
          if (res.length > 0) {
            this.$toast("用户已经存在,请重新注册");
          } else {
            this.$ajax.register(value).then((res) => {
              this.$toast.success("注册成功");
              this.$router.push({
                name: "login",
                query: value,
              });
            });
          }
        });
    },
    onFailed() {
      this.$notify({
        message: "数据校验失败,请重试",
        color: "#ad0000",
        background: "#ffe1e1",
      });
    },
  },
  mounted() {
    // this.$axios.get("/test").then((res) => {});
    this.$ajax.test().then((res) => {});
  },
};
</script>